<template>
	<gui-page :customHeader="true" :headerClass="['hulu-bg-color7']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:60rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">详情</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column" style="background-color: #F1F2F5;">
				<gui-swiper :indicatorWidth="10" :indicatorActiveWidth="10" :indicatorHeight="10"
					:indicatorActiveClass="['gui-bg-orange']" :swiperItems="carousel_images" :padding="0" :spacing="0" 
					:borderRadius="'0px'" imgMode="widthFix" :width="750" :height="556"></gui-swiper>
				<hulu-card-info></hulu-card-info>
				<view class="" @tap="toComment">
					写评论
				</view>
				<view class="" style="height:24rpx;">

				</view>
				<view class="gui-bg-white">
					<view class="" style="box-sizing: border-box;padding: 18rpx 25rpx;">
						<gui-switch-navigation textAlign="center" :activeLineWidth="'96rpx'" :size="128"
							activeDirection="center"
							:activeLineClass="['gui-nav-scale','hulu-line-gradient', 'gui-gtbg-black']"
							:titleActiveClass="['hulu-text-color1','hulu-font-2']"
							:titleClass="['hulu-text-color2','hulu-font-3']" :items="navItems"
							@change="navChange"
							:currentIndex="currentIndex"></gui-switch-navigation>
					</view>
				</view>

				<swiper :current="currentIndex" @change="swiperChange" class="tab-card-body">
					<!-- 轮播项目数量对应 上面的选项标签 -->
					<swiper-item class="tab-card-item gui-bg-white">
						<view class="gui-bg-white" style="margin: 12rpx 50rpx;box-sizing: border-box;">
							<view class="" style="display: flex;">
								<view class="hulu-font-4 hulu-text-color3" style="width:140rpx;">
									套餐内容：
								</view>
								<view class="hulu-font-4">
									麻辣牛肉X1
								</view>
							</view>
							<view class="" style="display: flex;margin-top:12rpx">
								<view class="hulu-font-4 hulu-text-color3" style="width:140rpx;">
									原材料：
								</view>
								<view class="hulu-font-4">
									辣椒、肉
								</view>
							</view>
							<view class="" style="display: flex;margin-top:12rpx">
								<view class="hulu-font-4 hulu-text-color3" style="width:140rpx;">
									过敏原：
								</view>
								<view class="hulu-font-4">
									过敏原1、过敏原2
								</view>
							</view>
							<view class="" style="display: flex;margin-top:12rpx">
								<view class="hulu-font-4 hulu-text-color3" style="width:140rpx;">
									出菜时间：
								</view>
								<view class="hulu-font-4">
									12分钟
								</view>
							</view>
							<view class="" style="display: flex;margin-top:12rpx">
								<view class="hulu-font-4 hulu-text-color3" style="width:140rpx;">
									特殊说明：
								</view>
								<view class="hulu-font-4">
									发烧人群尽量不要食用
								</view>
							</view>
							<view class="" style="height:42rpx">

							</view>
							<view
								class="hulu-font-4 gui-flex gui-rows gui-nowrap gui-border-l gui-border-t hulu-table-tr1">
								<text
									class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">营养成分</text>
								<text
									class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">含量（mg）</text>
							</view>
							<view
								class="hulu-font-4 hulu-bg-color8 gui-flex gui-rows gui-nowrap gui-border-l hulu-table-tr2">
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">碳水化合物</text>
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">12</text>

							</view>
							<view
								class="hulu-font-4 hulu-bg-color8 gui-flex gui-rows gui-nowrap gui-border-l hulu-table-tr1">
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">蛋白质</text>
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">12</text>
							</view>
							<view
								class="hulu-font-4 hulu-bg-color8 gui-flex gui-rows gui-nowrap gui-border-l hulu-table-tr2">
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">维生素</text>
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">12</text>

							</view>

							<view
								class="hulu-font-4 hulu-bg-color8 gui-flex gui-rows gui-nowrap gui-border-l hulu-table-tr1">
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">矿物质</text>
								<text
									class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">12</text>
							</view>

						</view>

					</swiper-item>
					<swiper-item class="tab-card-item" style="flex-shrink: 0;">
						<view class="comment-info">
							<view class="comment-header">
								<view class="header">
									<view class="header-avatar">
										<image src="../../static/assets/icon64_appwx_logo.png" mode="widthFix"
											style="width:60rpx;height:60rx;border-radius: 60rpx;"></image>
									</view>
									<view class="header-profile hulu-font-4" style="margin-left: 10rpx;">
										<view class="header-name" style="font-weight: bold;">
											我不是陈奕迅
										</view>
										<view class="header-time hulu-font-5 hulu-text-color4">
											2024-12-18
										</view>
									</view>

								</view>
								<view class="tail">
									<view class="star">
										<u-rate :value="3.5" :allowHalf="true" readonly active-color="#C79E62"
											inactive-color="#cccccc"></u-rate>
									</view>
									<view class="score">
										3.5分
									</view>
								</view>
							</view>
							<view class="comment-txt hulu-font-4 hulu-text-color3">
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
							</view>
						</view>
						<view class="comment-info">
							<view class="comment-header">
								<view class="header">
									<view class="header-avatar">
										<image src="../../static/assets/icon64_appwx_logo.png" mode="widthFix"
											style="width:60rpx;height:60rx;border-radius: 60rpx;"></image>
									</view>
									<view class="header-profile hulu-font-4" style="margin-left: 10rpx;">
										<view class="header-name" style="font-weight: bold;">
											我不是陈奕迅
										</view>
										<view class="header-time hulu-font-5 hulu-text-color4">
											2024-12-18
										</view>
									</view>

								</view>
								<view class="tail">
									<view class="star">
										<u-rate :value="3.5" :allowHalf="true" readonly active-color="#C79E62"
											inactive-color="#cccccc"></u-rate>
									</view>
									<view class="score">
										3.5分
									</view>
								</view>
							</view>
							<view class="comment-txt hulu-font-4 hulu-text-color3">
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
							</view>
						</view>
						<view class="comment-info">
							<view class="comment-header">
								<view class="header">
									<view class="header-avatar">
										<image src="../../static/assets/icon64_appwx_logo.png" mode="widthFix"
											style="width:60rpx;height:60rx;border-radius: 60rpx;"></image>
									</view>
									<view class="header-profile hulu-font-4" style="margin-left: 10rpx;">
										<view class="header-name" style="font-weight: bold;">
											我不是陈奕迅
										</view>
										<view class="header-time hulu-font-5 hulu-text-color4">
											2024-12-18
										</view>
									</view>

								</view>
								<view class="tail">
									<view class="star">
										<u-rate :value="3.5" :allowHalf="true" readonly active-color="#C79E62"
											inactive-color="#cccccc"></u-rate>
									</view>
									<view class="score">
										3.5分
									</view>
								</view>
							</view>
							<view class="comment-txt hulu-font-4 hulu-text-color3">
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
							</view>
						</view>
						<view class="comment-info">
							<view class="comment-header">
								<view class="header">
									<view class="header-avatar">
										<image src="../../static/assets/icon64_appwx_logo.png" mode="widthFix"
											style="width:60rpx;height:60rx;border-radius: 60rpx;"></image>
									</view>
									<view class="header-profile hulu-font-4" style="margin-left: 10rpx;">
										<view class="header-name" style="font-weight: bold;">
											我不是陈奕迅
										</view>
										<view class="header-time hulu-font-5 hulu-text-color4">
											2024-12-18
										</view>
									</view>

								</view>
								<view class="tail">
									<view class="star">
										<u-rate :value="3.5" :allowHalf="true" readonly active-color="#C79E62"
											inactive-color="#cccccc"></u-rate>
									</view>
									<view class="score">
										3.5分
									</view>
								</view>
							</view>
							<view class="comment-txt hulu-font-4 hulu-text-color3">
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
								编译成功。前端运行日志，请另行在小程序开发工具的控制台查看
							</view>
						</view>
						<view class="comment-more gui-text-center hulu-text-color4 hulu-font-4" style="height:56rpx;line-height: 56rpx;">
							查看更多
						</view>
					</swiper-item>
				</swiper>
			</view>

			<gui-iphone-bottom :customClass="['gui-bg-white']"></gui-iphone-bottom>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import cateChangeData from '@/Grace6/demoData/cateChange.js';
	import useDish from "@/api/dish"
	const {
		getDish,
		dish,
		carousel_images
	} = useDish()
	export default {
		data() {
			return {
				star: 3.5,
				dish: dish,
				currentIndex: 0,
				swipers: [],
				navItems: [{
						id: 0,
						name: "详情",
					},
					{
						id: 1,
						name: "评价",
					},
				],
				carousel_images: carousel_images
			}
		},
		async created() {
			await getDish(1)
		},
		onLoad: function() {
			// 获取页面主体高度从而得出主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					this.mainHeight = e.height - uni.upx2px(110);
					setTimeout(() => {
						this.pageLoading = false;
					}, 1000)
				});
			});
		},
		methods: {
			swiperChange(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			navChange: function(index) {
				this.currentIndex=index
			},
			toComment(){
				uni.navigateTo({
					url:`/subpage/dish/comment`
				})
			}
		}
	}
</script>

<style lang="scss">
	.hulu-line-gradient {
		background-image: linear-gradient(135deg, #A57B3F, #fce38a) !important;
	}

	.gui-td {
		width: 100rpx;
		flex: 1;
		overflow: hidden;
		padding: 12rpx 10rpx;
		display: flexbox;
	}

	.gui-primary-text {
		line-height: 64rpx !important;
		font-size: 28rpx;
	}

	.tab-card-body {
		height: 1200rpx;
	}

	.tab-card-item {
		height: 1200rpx;
	}

	.comment-info {
		width: 750rpx;
		height: 236rpx;
		margin-top: 12rpx;
		background-color: white;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 30rpx 24rpx;

		.comment-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header {
				display: flex;
			}

			.tail {
				display: flex;

				.star {
					margin-right: 28rpx;
				}

				.score {
					margin-right: 24rpx;
					height: 52rpx;
					background-color: #F2E1CA;
					border-radius: 12rpx;
					font-size: 28rpx;
					text-align: center;
					font-weight: bold;
					padding: 6rpx 16rpx;
					box-sizing: border-box;
					color: #A57B3F;
				}
			}
		}

		.comment-txt {
			margin-top: 14rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>